<template>
    <div class="resume-contain">
        <!-- region header -->
        <header v-show="headerShow">
            <p>对萨达色无群二无群</p>
        </header>
        <!-- endregion header -->

        <!-- region 锚点 -->
        <div class="anchor" v-show="anchorShow" @click="jump()">
            <span class="icon-up" v-html="icon"></span>
        </div>
        <!-- endregion 锚点 -->

        <!-- region 背景图 -->
        <section class="bg-section" :style="{ height: sectionHeight}" style="display: none">
            <!--<div class="my-header">-->
            <!--<img src="../assets/images/myheader.png"/>-->
            <!--</div>-->
            <!--<p class="self-introduction-en">Hello，I'm Hale</p>-->
            <!--<p class="self-introduction-cn">我叫 陈明</p>-->
            <!--<p class="self-introduction-cn">一名前端开发工程师</p>-->
            <!--<p class="email">cm971991@163.com</p>-->
        </section>
        <!-- endregion 背景图 -->

        <!-- region 关于我 -->
        <section class="aboutMe-section" :style="{ height: sectionHeight}">
            <h1>{{ resumeData.resume.resume_data[0].name }}</h1>
        </section>
        <!-- endregion 关于我 -->

        <!-- region 技能 -->
        <section class="skill-section" :style="{ height: sectionHeight}">
            <h1>{{ resumeData.resume.resume_data[1].name }}</h1>
        </section>
        <!-- endregion 技能 -->

        <!-- region 经历 -->
        <section class="experience-section" :style="{ height: sectionHeight}">
            <h1>{{ resumeData.resume.resume_data[2].name }}</h1>
        </section>
        <!-- endregion 经历 -->

        <!-- region 作品 -->
        <section class="production-section">
            <h1>{{ resumeData.resume.resume_data[3].name }}</h1>
            <swiper :options="swiperOption">
                <swiper-slide><img src="../assets/images/production1.jpg"/></swiper-slide>
                <swiper-slide><img src="../assets/images/production2.jpg"/></swiper-slide>
                <swiper-slide><img src="../assets/images/production3.jpg"/></swiper-slide>
                <swiper-slide><img src="../assets/images/production4.jpg"/></swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </section>
        <!-- endregion 作品 -->

        <!-- region 联系我 -->
        <section class="contactMe-section" :style="{ height: sectionHeight}">
            <h1>{{ resumeData.resume.resume_data[4].name }}</h1>
        </section>
        <!-- endregion 联系我 -->

        <div class="loading">
            <div class="loading-left" :class="loadingAnimate"></div>
            <div class="loading-right" :class="loadingAnimate"></div>
        </div>
        <div class="person">
            <div class='head'></div>
            <div class='part arm one'></div>
            <div class='part arm two'></div>
            <div class='torso'></div>
            <div class='part leg one'></div>
            <div class='part foot one'></div>
            <div class='part leg two'></div>
            <div class='part foot two'></div>
        </div>
        <div class="person-overturn">
            <div class='head'></div>
            <div class='part arm one'></div>
            <div class='part arm two'></div>
            <div class='torso'></div>
            <div class='part leg one'></div>
            <div class='part foot one'></div>
            <div class='part leg two'></div>
            <div class='part foot two'></div>
        </div>
    </div>
</template>

<script>
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'

  export default {
    components: {
      swiper,
      swiperSlide
    },
    data () {
      return {
        loading: '',
        headerShow: false,
        anchorShow: false,
        scrollTop: 0,
        winHeight: 0,
        icon: '&#xe61e;',
        resumeData: require('../../static/resume.json'),
        swiperOption: {
          pagination: '.swiper-pagination',
          effect: 'cube',
          grabCursor: true,
          cube: {
            shadow: true,
            slideShadows: true,
            shadowOffset: 20,
            shadowScale: 0.94
          }
        }
      }
    },
    computed: {
      sectionHeight () {
        this.winHeight = this.$utils.Common.getWidthHeight().height
        return this.winHeight + 'px'
      },
      loadingAnimate () {
        return this.loading === 'loadMore' ? 'loadMore' : this.loading === 'loadLess' ? 'loadLess' : ''
      }
    },
    created () {
      console.log('this.resumeData:', this.resumeData)
    },
    mounted () {
      this.scrollTop = document.documentElement.scrollTop || window.pageYOffset || window.scrollY || document.body.scrollTop
      console.log('scrollTop', this.scrollTop)
//      let position = Math.round((this.scrollTop / this.winHeight) * 100) / 100
//      console.log('position:', position)
//      if (position < 0.5) {
//        document.body.scrollTop = 0
//      } else if (position > 0.5 && position < 1.0) {
//        document.body.scrollTop = this.winHeight + 50
//      } else if (position > 1.0 && position < 1.5) {
//        document.body.scrollTop = this.winHeight * 2 + 50 * 2
//      } else if (position > 1.5 && position < 2.0) {
//        document.body.scrollTop = this.winHeight * 3 + 50 * 3
//      }
      // 首页动画效果
      if (this.scrollTop === 0) {
        this.loading = 'loadMore'
        document.querySelector('.loading-left').addEventListener('webkitAnimationEnd', this.animationEnd)
      }
      window.addEventListener('scroll', this.handleScroll)
    },
    methods: {
      /**
       * 监控滚动条距离
       */
      handleScroll () {
        this.scrollTop = document.documentElement.scrollTop || window.pageYOffset || window.scrollY || document.body.scrollTop
        this.headerShow = this.scrollTop > 80
        this.anchorShow = this.scrollTop > 300
      },
      /**
       * 动画结束
       */
      animationEnd () {
        console.log('animationEnd')
        this.scrollTop = document.body.scrollTop = document.querySelector('.aboutMe-section').offsetTop
        this.loading = 'loadLess'
      },
      jump () {
        let $jump = document.querySelector('.bg-section')
        let total = $jump.offsetTop
        let distance = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
        // 平滑滚动，时长500ms，每10ms一跳，共50跳
        let step = total / 50
        if (total > distance) {
          smoothDown()
        } else {
          let newTotal = distance - total
          step = newTotal / 50
          smoothUp()
        }

        function smoothDown () {
          if (distance < total) {
            distance += step
            document.body.scrollTop = distance
            document.documentElement.scrollTop = distance
            window.pageYOffset = distance
            setTimeout(smoothDown, 10)
          } else {
            document.body.scrollTop = total
            document.documentElement.scrollTop = total
            window.pageYOffset = total
          }
        }

        function smoothUp () {
          if (distance > total) {
            distance -= step
            document.body.scrollTop = distance
            document.documentElement.scrollTop = distance
            window.pageYOffset = distance
            setTimeout(smoothUp, 10)
          } else {
            document.body.scrollTop = total
            document.documentElement.scrollTop = total
            window.pageYOffset = total
          }
        }
      }
    },
    watch: {
      scrollTop () {
        this.handleScroll()
      }
    }
  }
</script>

<style lang="less" rel="stylesheet/less">
    @import '../assets/styles/resume';
</style>
